/* @flow */
'use strict';

var React = require('react-native');

var {
	SegmentedControlIOS,
	StyleSheet,
	View,
	Text
} = React;

var SegmentedControllView = React.createClass({

	getInitialState: function() {
		return {
			selectIndex: 0,
			textValue: ''
		};
	},

	changeValue: function(value) {

		console.log(value);
		this.setState({
			textValue: value
		});
	},

	changed: function(event) {
		console.log(event);
		this.setState({
			// 获取下标
			selectIndex: event.nativeEvent.selectedSegmentIndex,
		});
	},

	render: function() {
		return (
			<View style = {styles.content}>
				<SegmentedControlIOS
					values={['第一个','第二个','第三个']}
					selectedIndex = {0}
					tintColor = '#7CA6C4'
					onValueChange = {this.changeValue}
					onChange = {this.changed}
					/>
				<Text>
					{"您当前选中了 "+ this.state.textValue+" 这是第"+(this.state.selectIndex+1)}
				</Text>
				 
			</View>
		);
	}
});


var styles = StyleSheet.create({
	content: {
		flex: 1,
		marginTop: 64
	}
});


module.exports = SegmentedControllView;